<template>
  <view class="itinerary-container">
    <view v-if="itineraries.length > 0" class="itinerary-list">
      <view v-for="(itinerary, index) in itineraries" :key="index" class="itinerary-item">
        <div class="item-header">
          <h2 class="itinerary-title">{{ itinerary.name }}</h2>
          <button class="delete-button" @tap="deleteItinerary(index,itinerary.id)">
            <uni-icons type="closeempty" size="12"></uni-icons>
          </button>
        </div>
        <view v-if="itinerary.progress === '0'" class="travel-status">正在旅行中</view>
        <view class="itinerary-details">
          <image class="city-selectors":src="itinerary.img_url" mode="widthFix"></image>
          <div class="info-group">
            <p>日期：{{itinerary.date}}</p>
            <p>出发城市：{{itinerary.departure_city}}</p>
            <p>目的城市：{{itinerary.destination_city}}</p>
            <p>旅行天数：{{itinerary.duration_days}} 天</p>
            <p>人均预算：{{itinerary.budget}} 元</p>
            <p>旅行方式：{{itinerary.mode_of_transportation}}</p>
            <p>主要活动：{{itinerary.main_activity}}</p>
            <p>同行人数：{{itinerary.number_of_people}} 人</p>
          </div>
          <div v-for="(dayItinerary, dayIndex) in itinerary.daily_itineraries" :key="dayIndex"
               class="day-itinerary">
            <h3 class="day-title">第 {{ dayIndex + 1 }} 天</h3>
            <div class="itinerary-section">
              <h4 class="section-title">上午活动</h4>
              <p class="section-description">{{ dayItinerary.morning_activity }}</p>
            </div>
            <div class="itinerary-section">
              <h4 class="section-title">下午活动</h4>
              <p class="section-description">{{ dayItinerary.afternoon_activity }}</p>
            </div>
            <div class="itinerary-section">
              <h4 class="section-title">晚上活动</h4>
              <p class="section-description">{{ dayItinerary.evening_activity }}</p>
            </div>
            <button v-if="dayItinerary.clock != '1' " class="check-in-button" @tap="checkIn(itinerary.id, dayItinerary.ID)">打卡</button>
			<button v-if="dayItinerary.clock == '1' " disabled>已打卡</button>
		  </div>
          <p>行程建议：{{itinerary.suggestion}}</p>
        </view>
      </view>
    </view>
    <view v-else class="no-itinerary-prompt" @tap="goToPlanItinerary">
      <div class="button-like">
        <i class="fa-solid fa-plus"></i> 暂无行程，去制定行程吧
      </div>
    </view>
  </view>
</template>

<script>
  var _self;
  export default {
    data() {
      return {
        itineraries: [],
        selectedItinerary: null
      };
    },
    created() {
      _self = this;
    },
    methods: {
      checkIn(travelPlanId, dailyItineraryId) {
        const userId = uni.getStorageSync('uid');
        const requestUrl = `https://api.xiaoyaoyou.hanfenga7.cn/api/v1/iterary/clock/${travelPlanId}/${userId}/${dailyItineraryId}`;
        console.log(requestUrl)
		uni.request({
          url: requestUrl,
          method: 'POST', // 根据接口实际情况修改请求方法，这里假设是 POST
          header: {
            'Authorization': `Bearer ${uni.getStorageSync('token')}`,
            'Content-Type': 'application/json'
          },
          success: function (res) {
			  console.log(res.data)
            if (res.statusCode === 200) {
              uni.showToast({
                icon:'success',
                title: '打卡成功'
              });
			  uni.reLaunch({
			  	url:'/pages/itinerary/Itinerary'
			  })
            } else {
              uni.showToast({
                icon: 'error',
                title: '打卡失败，请稍后重试'
              });
            }
          },
          fail: function () {
            uni.showToast({
              icon: 'error',
              title: '打卡请求失败，请检查网络'
            });
          }
        });
      },
      goToPlanItinerary() {
        console.log('去制定行程按钮被点击了');
        uni.navigateTo({
          url: '/pages/ai-assistant/ai-assistant'
        });
      },
      getItinerary() {
        const requestData = {};
        uni.request({
          url: `https://api.xiaoyaoyou.hanfenga7.cn/api/v1/iterary/travelplan/uid/${uni.getStorageSync('uid')}`,
          method: 'GET',
          header: {
            'Authorization': `Bearer ${uni.getStorageSync('token')}`,
            'Content-Type': 'application/json'
          },
          data: requestData,
          success: function (res) {
            uni.hideLoading();
            if (res.statusCode === 200) {
              console.log("0", res.data.data);
              const processedData = res.data.data.map(plan => {
                const currentDate = new Date();
                const year = currentDate.getFullYear();
                const month = String(currentDate.getMonth() + 1).padStart(2, '0');
                const day = String(currentDate.getDate()).padStart(2, '0');
                const formattedDate = `${year}-${month}-${day}`;

                let imgUrl = '';
                if (plan.destination_city === '北京') {
                  imgUrl = '/static/images/beijing.jpg';
                } else if (plan.destination_city === '上海') {
                  imgUrl = '/static/images/shanghai.jpg';
                } else {
                  imgUrl = '/static/images/default.jpg';
                }

                return {
                  id: plan.ID,
                  name: plan.name,
                  img_url: plan.img_url,
                  date: plan.date,
                  departure_city: plan.departure_city,
                  destination_city: plan.destination_city,
                  duration_days: plan.duration_days,
                  budget: plan.budget,
                  mode_of_transportation: plan.mode_of_transportation,
                  main_activity: plan.main_activity,
                  number_of_people: plan.number_of_people,
                  daily_itineraries: plan.daily_itineraries,
                  suggestion: plan.suggestion,
                  progress: plan.progress
                };
              });
              _self.itineraries = processedData;
            } else {
              uni.showToast({
                title: '查询失败，请稍后重试',
                icon: 'error'
              });
            }
            console.log(res);
          }
        });
      },
      deleteItinerary(index, id) {
        uni.showModal({
          title: '确认删除',
          content: '确定要删除该行程吗？',
          success: (res) => {
            if (res.confirm) {
              this.itineraries.splice(index, 1);
              uni.request({
                url: `https://api.xiaoyaoyou.hanfenga7.cn/api/v1/iterary/delete/${id}`,
                method: 'DELETE',
                header: {
                  'Authorization': `Bearer ${uni.getStorageSync('token')}`,
                  'Content-Type': 'application/json'
                },
                success(res) {
                  console.log("1:", res, id);
                  uni.showToast({
                    icon:'success',
                    title: '删除成功'
                  });
                }
              });
            }
          }
        });
      }
    },
    onLoad() {
		if (uni.getStorageSync('token') == '') {
		    uni.reLaunch({
		        url: '/pages/login/login'
		    })
		}
      this.getItinerary();
    }
  };
</script>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

  body {
    font-family: 'Inter', sans-serif;
  }

.itinerary-container {
    padding: 24px 17px;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    width: 85%; 
    margin: 0 auto;
}

.itinerary-list {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    padding: 24px;
    width: 100%;
    max-width: 800px;
/*    margin: 0 auto; */
}

.itinerary-item {
    margin-bottom: 32px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 24px;
    transition: all 0.3s ease;
}

.itinerary-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.itinerary-title {
    font-size: 22px;
    font-weight: 600;
    color: #333;
    margin: 0;
    line-height: 1.3;
}

.travel-status {
    color: #007bff;
    font-weight: 600;
    font-size: 14px;
    padding: 4px 8px;
    background-color: rgba(0, 123, 255, 0.1);
    border-radius: 12px;
}

.itinerary-details {
    font-size: 15px;
    color: #666;
    margin-top: 16px;
    line-height: 1.5;
}
.city-selectors{
	width: 100%;
	border-radius: 20px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.itinerary-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin: 16px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.itinerary-image:hover {
    transform: scale(1.02);
}

.info-group p {
    margin: 6px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.day-itinerary {
    margin-top: 24px;
    border: 1px solid #e0e0e0;
    padding: 16px;
    border-radius: 8px;
    background-color: #fafafa;
    transition: all 0.3s ease;
}

.day-itinerary:hover {
    border-color: #b3d7ff;
    background-color: #f5f9ff;
}

.day-title {
    font-size: 17px;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}

.itinerary-section {
    margin-bottom: 16px;
}

.section-title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.section-description {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    padding-left: 8px;
    border-left: 3px solid #b3d7ff;
}

.check-in-button {
    background-color: #059bff;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
    transition: all 0.3s ease;
    gap: 8px;
	width: 100%;
}

.check-in-button:hover {
    background-color: #059bff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
}

.no-itinerary-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #999;
    background-color: #f2f2f2;
    padding: 80px 24px;
    border-radius: 16px;
    margin: 40px auto;
    width: 85%;
    max-width: 600px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px dashed #d9d9d9;
}

.no-itinerary-prompt:hover {
    background-color: #eaeaea;
    border-color: #bfbfbf;
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.button-like {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #007bff;
    color: white;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 123, 255, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.button-like:hover {
    background-color: #0069d9;
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 123, 255, 0.3);
}

/* 删除计划按钮 */
.delete-button {
	background-color: #f1f1f1;
	display: inline-flex;
	padding: 8px 16px;
	position: relative;
	left: 30%;
}

.delete-button:hover {
    background-color: #c82333;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
}

/* 新增的图标样式 */
.icon {
    width: 18px;
    height: 18px;
}

/* 响应式设计 */
@media (max-width: 640px) {
    .itinerary-list {
        width: 95%;
        padding: 16px;
    }
    
    .itinerary-title {
        font-size: 20px;
    }
    
    .button-like {
        padding: 14px 24px;
        font-size: 16px;
    }
}
</style>